import React, {useCallback, useState} from 'react';

const Button = React.memo(({onClick, children}: { onClick: () => void; children: string }) => {
    console.log('按钮渲染:', children);
    return <button onClick={onClick}>{children}</button>;
});

export function TestUseCallback() {
    const [count, setCount] = useState(0);

    // 普通函数 - 每次渲染都会创建新函数
    const handleClick = () => {
        setCount(c => c + 1);
    };

    // 使用useCallback记忆化的函数
    const memoizedHandleClick = useCallback(() => {
        setCount(c => c + 1);
    }, []); // 空依赖数组表示不依赖任何值

    return (
        <div>
            <p>计数: {count}</p>
            <Button onClick={handleClick}>普通按钮</Button>
            <Button onClick={memoizedHandleClick}>记忆化按钮</Button>
        </div>
    );
}